<template>
    <!-- 盒须图 -->
    <div class="width100 height100" :id="chartId"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: 'boxplot',
    emits: [],
    components: {},
    props: {
        // 布局类型
        layout: { type: String, default: 'one' },
        showClass: { type: Boolean },
        change: {},
        socketObj: { type: Object, default: () => { } },
        name: { type: String },
        url: { type: String },
        datay1: { type: String },
        datay2: { type: String },
    },
    watch: {
        change() {
            this.$nextTick(() => {
                setTimeout(this.chartResize, 20)
            })
        },
        socketStatus(val) {
            if (val) this.initUpdateBack();
        },
    },
    computed: {
        socketStatus() {
            return this.socketObj.status
        }
    },
    created() {
        // 盒须图id
        this.chartId = this.$uuid();
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                // 初始化图像
                this.initChart();
                // 初始化回调函数和启动接收数据
                this.initUpdateBack();
            }, 100)
        })
    },
    data() {
        return {
            // 盒须图id
            chartId: null,
            // 盒须图对象
            boxplotChart: null,
            // 盒须图数据
            dataset: [
                { source: [] },
                { fromDatasetIndex: 0, transform: { type: 'boxplot', config: { itemNameFormatter: '{value}' } } },
                { fromDatasetIndex: 1, fromTransformResult: 1 },
                { source: [] },
                { fromDatasetIndex: 3, transform: { type: 'boxplot', config: { itemNameFormatter: '{value}' } } },
                { fromDatasetIndex: 4, fromTransformResult: 1 },
            ],

        }
    },
    methods: {
        // 初始化socket返回处理函数
        initUpdateBack() {
            if (!this.socketObj) return;
            this.socketBack();
            this.startPush();
        },
        // 设置socket回调函数
        socketBack() {
            // 盒须图回调函数
            this.socketObj.setMsgBack({
                cmd: `push-${this.url}`,
                fun: rs => {
                    let result = this.formartResult(rs.data);
                    result.central = result.central.map(item => item / 10 ** 6);
                    this.updateCharts(result);
                },
            })
        },
        // 启动推送消息
        startPush() {
            // 启动盒须图数据接收
            this.socketObj.sendMsg({ cmd: `start-${this.url}` })
            // .then(rs => {
            //     console.log(`${this.name}启动成功:`, rs)
            // })
        },
        // socket数据过滤统一处理
        formartResult(result) {
            let { dataLables, data } = result;
            let resultMap = {};
            if (dataLables.length != data.length) {
                console.log("数据解析失败:", result)
                return resultMap
            } else {
                for (let i = 0; i < dataLables.length; i++) {
                    resultMap[dataLables[i]] = data[i]
                }
            }
            return resultMap
        },
        // 初始化图形dom
        initChart(central, time = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]) {
            if (!this.boxplotChart) this.boxplotChart = echarts.init(document.getElementById(this.chartId));
            this.boxplotChart.setOption({
                title: {
                    text: `北京时间(小时),频率(MHz)  ${this.name}`, bottom: '0', left: '10',
                    textStyle: {
                        // fontSize: this.showClass ? '0.6rem' : '12px',
                        fontSize: '12px', fontFamily: 'Microsoft YaHei, Microsoft YaHei', color: '#575D73'
                    }
                },
                tooltip: { show: false, trigger: 'item', axisPointer: { type: 'shadow' } },
                grid: { containLabel: false, show: true, backgroundColor: '#161627', left: '40', bottom: '70', right: '10', top: '10' },
                xAxis: [
                    {
                        type: 'category',
                        // boundaryGap: false,
                        data: time,
                    }, {
                        type: 'category',
                        position: 'bottom',
                        axisLine: { onZero: false, show: false }, axisTick: { show: false, alignWithLabel: true }, splitLine: { show: false },
                        axisLabel: {
                            interval: 0, rotate: 45, margin: 25, formatter: function (value, index) { return `{yearStyle|${value}}` },
                            rich: { yearStyle: { color: '#575D73', fontFamily: 'Microsoft YaHei, Microsoft YaHei', fontWeight: '700', }, }
                        },
                        // textStyle: { fontSize: this.showClass ? '0.6rem' : '12px', fontFamily: 'Microsoft YaHei, Microsoft YaHei', color: '#575D73' },
                        data: central
                    }
                ],
                yAxis: { type: 'value', splitLine: { show: false }, splitArea: { show: false }, show: true },
                dataset: this.dataset,
                series: [
                    { type: 'boxplot', datasetIndex: 1, itemStyle: { borderColor: "#AA9B5F", color: '#AA9B5F' }, hoverAnimation: false },
                    { type: 'scatter', datasetIndex: 2, itemStyle: { color: '#036EB7' }, hoverAnimation: false },
                    { type: 'boxplot', datasetIndex: 4, itemStyle: { borderColor: "red", color: 'red' }, hoverAnimation: false },
                    { type: 'scatter', datasetIndex: 5, itemStyle: { color: 'red' }, hoverAnimation: false },
                ]
            });
        },
        // 更新盒须图
        updateCharts(result) {
            const { central, time } = result;
            if (this.datay1 && result[this.datay1]) this.dataset[0].source = result[this.datay1];
            if (this.datay2 && result[this.datay2]) this.dataset[3].source = result[this.datay2];
            if (!this.boxplotChart) {
                this.initChart1(central);
            } else {
                this.boxplotChart.setOption({
                    xAxis: [{ data: time }, { data: central }],
                    dataset: this.dataset
                })
            }
        },
        // 适配图像
        chartResize() {
            if (!this.boxplotChart) {
                this.initChart()
            } else {
                this.boxplotChart.resize()
            }
        },
    },
    beforeDestroy() {
        // 删除socket的数据监听
        if (this.socketObj) {
            // 停止推送
            this.socketObj.sendMsg({ cmd: `stop-${this.url}` });
            // 删除处理函数
            this.socketObj.removeMsgBack({ cmd: `push-${this.url}` })

        }
    }
}
</script>

<style lang="scss" scoped></style>